<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卧槽</title>
    <link rel="stylesheet" href="resources/css/bootstrap.css">
    <script src="resources/js/jq.js"></script>
    <script src="resources/js/vue.js"></script>
    <style>
        * {
            user-select: none;
        }

        .column-start-start {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
        }

        .column-center-center {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .column-between-start {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
        }

        .column-between-center {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
        }

        .column-start-center {
            display: flex;
            flex-direction: column;
            justify-content: start;
            align-items: center;
        }

        .row-start-center {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
        }

        .row-start-start {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
        }

        .row-around-center {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
        }

        .row-center-center {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .row-between-center {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }

        .bggreen {
            background: green;
        }

        .bgblue {
            background: blue;
        }

        .bgyellor {
            background: yellow;
        }

        .bgorange {
            background: orange;
        }

        .bgred {
            background: red;
        }

        .bgwhite {
            background: white;
        }

        /*---滚动条默认显示样式--*/
        ::-webkit-scrollbar-thumb {
            background-color: gainsboro;
            height: 50px;
            outline-offset: -2px;
            outline: 2px solid rgba(255, 255, 255, 0);
            border-radius: 4px;
        }

        /*---鼠标点击滚动条显示样式--*/
        ::-webkit-scrollbar-thumb:hover {
            background-color: gray;
            height: 50px;
        }

        /*---滚动条大小--*/
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        /*---滚动框背景样式--*/
        ::-webkit-scrollbar-track-piece {
            background-color: rgba(255, 255, 255, 0);
        }
    </style>
</head>

<body>
    <div id="app" class="" style="position: fixed;top: 0;bottom: 0;left: 0;right: 0;height:100%;width:100%;">
        <div id="top" class="bgwhite" style="position: absolute;top: 0;left: 0;height: 40px;width: 100%;">
            <span style="font-size: 23px;margin-left: 15px;">
                选择一个模板
            </span>
        </div>
        <div class="column-start-start" id="content"
            style="position: absolute;left: 20px;right:20px;top: 50px;bottom: 55px;overflow-y: scroll;">
            <div @click="select(item)" v-for="item in list" class="column-start-start"
                :style="'width: 100%;border: 1px solid gainsboro;min-height: 100px;margin-bottom: 10px;overflow-y: hidden;'+(item.active?'background: rgb(243, 199, 119);':'')">
                <div class="'w-100 row-start-center" style="margin-top:10px">
                    <svg style="margin-left: 10px;" t="1595638625295" class="icon" viewBox="0 0 1059 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="17767" width="20" height="20">
                        <path
                            d="M387.001379 58.932966c25.494069 0 48.622345 21.186207 48.622345 49.434482v324.890483c0 25.917793-20.833103 49.434483-48.587034 49.434483H65.430069c-25.423448 0-48.587034-21.186207-48.587035-49.434483v-324.855172c0-25.917793 20.833103-49.469793 48.587035-49.469793h321.606621z m490.531311 526.053517c25.458759 0 48.587034 21.186207 48.587034 49.434483v324.925793c0 25.882483-20.833103 49.434483-48.587034 49.434482H558.256552c-25.458759 0-48.587034-21.186207-48.587035-49.434482v-324.925793c0-25.882483 20.833103-49.434483 48.587035-49.434483h319.276138z m-490.496 0c25.423448 0 48.587034 21.186207 48.587034 49.434483v324.925793c0 25.882483-20.833103 49.434483-48.587034 49.434482H65.430069c-25.423448 0-48.587034-21.186207-48.587035-49.434482v-324.925793c0-25.882483 20.833103-49.434483 48.587035-49.434483h321.606621z"
                            fill="#5C6086" p-id="17768"></path>
                        <path
                            d="M1020.998621 148.409379l-263.768276-141.241379c-23.128276-14.124138-97.174069-4.731586-108.755862 21.186207l-122.632828 308.400552c-11.546483 23.51669-4.590345 54.130759 20.833104 68.254896l249.89131 145.972966c57.838345 23.552 92.548414-2.365793 104.130207-25.882483l143.430621-277.821793c13.876966-25.882483 13.876966-80.048552-23.128276-98.868966z"
                            fill="#C4DFFB" p-id="17769"></path>
                        <path
                            d="M979.332414 162.533517L694.731034 9.498483c-23.092966-11.793655-53.177379-2.365793-64.759172 21.186207l-150.386759 289.544827c-11.581793 23.58731-2.330483 54.166069 20.833104 65.959724l284.601379 153.035035c23.128276 11.758345 53.177379 2.330483 64.759173-21.186207l150.422069-289.580138c11.546483-23.552 2.295172-51.800276-20.833104-65.924414z"
                            fill="#0AC199" p-id="17770"></path>
                    </svg>
                    <span style="font-size: 19px;margin-left: 5px;">{{item.name}}</span>
                </div>
                <div style="margin-left: 10px;">
                    <span style="color: gray;font-size: 15px;">{{item.ds}}</span>
                </div>
            </div>
        </div>
        <div class="column-start-start w-100" id="bottombar"
            style="position: absolute;left: 0;bottom: 0;height: 55px;width: 100%;">
            <div class="row-between-center w-100" style="margin-top: 10px;">
                <span style="margin-left: 15px;min-width: 50px;">名称:</span>
                <input id="input" style="border: 1px solid gainsboro;border-radius: 4px;width: 100%;" type="text"
                    value="未命名项目1">
                <button onclick="complet()" class="btn btn-dark"
                    style="margin-right: 15px;margin-left: 10px;min-width: 80px;height: 30px;padding: 0;">完成</button>
            </div>
        </div>
    </div>

    <script>
        var list = [
            {
                active: false,
                name: "人物模板（完整）",
                ds: "包含完整人物贴图，附加帽子，背包，工具，等外置图层。包含人物3面图，所有表情动画，附加部分人物动画",
                file: "file1"
            },
            {
                active: false,
                name: "人物模板（简版）",
                ds: "黄猫模板，仅含完整人物贴图，人物3面动画",
                file: "file2"
            },
            {
                active: false,
                name: "鬼魂模板",
                ds: "鬼魂模板，包含全部贴图，附几个动画",
                file: "file3"
            },
            {
                active: false,
                name: "蜂王模板",
                ds: "蜂王模板，包含蜂王主体贴图，完整动画，部分贴图需要手动加载，比如起火贴图",
                file: "file4"
            },
        ]
        var app = new Vue({
            el: "#app",
            data: {
                info: "张佳文",
                list: list,
                curritem: undefined
            },
            methods:
            {
                select: function (item) {
                    for (iterator of this.list) {
                        iterator.active = false;
                    }
                    item.active = true;
                    this.curritem = item;
                }
            }
        });

        CefSharp.BindObjectAsync("jsMethod2");
        function complet() {
            if (app.curritem) {
                jsMethod2.complet(app.curritem.file,$('#input').val());
            }
            else {
                window.alert("请选择一个模板");
            }
        }
    </script>

</body>

</html>